import { _decorator, Component, Node, UITransform, Widget, Button } from 'cc';
import { MatchManager } from '../network/MatchManager';
import { EventManager } from '../core/EventManager';
import { GameEvents } from '../constants/GameConstants';

const { ccclass, property } = _decorator;

// 使用自定义接口替代 cc.Label 和 cc.Button
interface Label extends Component {
    string: string;
    node: Node;
}

interface Button extends Component {
    node: Node;
}

/**
 * 匹配界面
 * 
 * 功能：
 * 1. 显示匹配状态
 * 2. 处理匹配操作
 * 3. 显示匹配进度
 * 4. 提供匹配反馈
 */
@ccclass('MatchUI')
export class MatchUI extends Component {
    @property(Label)
    private statusLabel: Label | null = null;

    @property(Label)
    private timerLabel: Label | null = null;

    @property(Button)
    private matchButton: Button | null = null;

    @property(Button)
    private cancelButton: Button | null = null;

    onLoad() {
        this.setupEventListeners();
        this.updateUI(false);
    }

    private setupEventListeners(): void {
        EventManager.instance.on(GameEvents.MATCH_START, this.onMatchStart.bind(this));
        EventManager.instance.on(GameEvents.MATCH_CANCEL, this.onMatchCancel.bind(this));
        EventManager.instance.on(GameEvents.MATCH_FOUND, this.onMatchFound.bind(this));
        EventManager.instance.on(GameEvents.MATCH_ERROR, this.onMatchError.bind(this));
        EventManager.instance.on(GameEvents.MATCH_TIMEOUT, this.onMatchTimeout.bind(this));
        EventManager.instance.on(GameEvents.MATCH_PROGRESS, this.onMatchProgress.bind(this));
    }

    private onMatchButtonClick(): void {
        MatchManager.instance.startMatching();
    }

    private onCancelButtonClick(): void {
        MatchManager.instance.cancelMatching();
    }

    private onMatchStart(): void {
        this.updateUI(true);
        this.setStatus('正在匹配...');
    }

    private onMatchCancel(): void {
        this.updateUI(false);
        this.setStatus('匹配已取消');
    }

    private onMatchFound(result: any): void {
        this.setStatus('匹配成功！');
        this.updateUI(false);
    }

    private onMatchError(error: string): void {
        this.setStatus(`匹配错误: ${error}`);
        this.updateUI(false);
    }

    private onMatchTimeout(): void {
        this.setStatus('匹配超时');
        this.updateUI(false);
    }

    private onMatchProgress(progress: number): void {
        if (this.timerLabel) {
            const remainingTime = Math.max(0, 30 - Math.floor(progress * 30));
            this.timerLabel.string = `${remainingTime}s`;
        }
    }

    private updateUI(matching: boolean): void {
        if (this.matchButton) {
            this.matchButton.node.active = !matching;
        }
        if (this.cancelButton) {
            this.cancelButton.node.active = matching;
        }
        if (this.timerLabel) {
            this.timerLabel.node.active = matching;
        }
    }

    private setStatus(status: string): void {
        if (this.statusLabel) {
            this.statusLabel.string = status;
        }
    }

    onDestroy() {
        EventManager.instance.off(GameEvents.MATCH_START, this.onMatchStart.bind(this));
        EventManager.instance.off(GameEvents.MATCH_CANCEL, this.onMatchCancel.bind(this));
        EventManager.instance.off(GameEvents.MATCH_FOUND, this.onMatchFound.bind(this));
        EventManager.instance.off(GameEvents.MATCH_ERROR, this.onMatchError.bind(this));
        EventManager.instance.off(GameEvents.MATCH_TIMEOUT, this.onMatchTimeout.bind(this));
        EventManager.instance.off(GameEvents.MATCH_PROGRESS, this.onMatchProgress.bind(this));
    }
} 